<template>
  <div class="ContentLeftBottom">
    <dv-border-box-12>
      <div class="title">聚爱优选2021年业务板块交易占比</div>
      <dv-scroll-board
        :config="config"
        style="
          width: 450px;
          height: 460px;
          margin: auto;
          margin-bottom: 20px;
          border-radius: 12px;
          overflow: hidden;
        "
      />
    </dv-border-box-12>
  </div>
</template>

<script>
export default {
  name: "ContentLeftBottom",
  props: {
    leftBottom: Object,
  },
  data() {
    return {
      config: {
        header: ["商品分类", "交易额(万元)", "交易占比"],
        data: [],
        index: true,
        indexHeader: "",
        columnWidth: [40],
        rowNum: 7,
        align: ["center"],
        headerBGC: "#06376F",
        evenRowBGC: "#061d46",
        oddRowBGC: "#09285A",
      },
    };
  },
  watch: {
    leftBottom: {
      deep: true,
      immediate: true,
      handler(n) {
        this.getConfig(n.plate);
      },
    },
  },
  methods: {
    getConfig(data) {
      data.forEach((e) => {
        this.config.data.push([e.name, e.value, e.accounted]);
      });
      this.config = { ...this.config };
    },
  },
};
</script>

<style>
.ContentLeftBottom {
  width: 100%;
  height: 55%;
}
.ContentLeftBottom .title {
  text-align: center;
  color: rgb(36, 161, 206);
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 20px;
}
</style>